<template>
  <div class="movieListRoot">
    <FontHeader style="background: #192332; position: relative;"></FontHeader>
    <div class="movieListContainer" style="height: 100%">
      <div class="movieListWrap">
        <div class="nav_left">
          <ul>
            <li>
              <router-link :to="{path:'/movieHistory',query:{status:0}}" class="router-link-active">
<!--              <a class="router-link-active" href="dist/#/movieHistory?status=0">-->
                看过的电影
              </router-link>
<!--              </a>-->
            </li>
            <li>
              <router-link :to="{path:'/movieHistory',query:{status:1}}" class="router-link-active">
<!--              <a class="router-link-active" href="/#/movieHistory?status=1">-->
                收藏的电影
<!--              </a>-->
              </router-link>
            </li>
          </ul>
        </div>
        <div class="content_right">
          <ul>
            <li v-for="item in movies" :key="item.movieId">
              <router-link :to="{path:'/detail',query:{movieId:item.movieId}}">
                <img :src="'http://43.138.158.143/posters/'+item.movieId+'.jpg'" class="content_left" style="width: 124px">
              </router-link>
              <div class="li_content_right">
                <a class="name">{{item.movieName}}({{item.movieReleasedYear}})</a>
                <div class="rating">
                  <i>{{item.movieAvgRating}}</i>
                </div>
                <span class="genre_types">{{item.movieGenres}}</span>
              </div>
            </li>
          </ul>
        </div>
        <div style="clear: both"></div>
      </div>
      <!--            分页组件-->
      <div style="margin: 0 auto;width: 600px">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import FontHeader from "@/components/FontHeader";
export default {
  name: "MovieHistory",
  components: {FontHeader},
  data(){
    return{
      page: 1,
      pageSize: 10,
      pageNum: 1,
      searchType: this.$route.query.searchType,
      info: this.$route.query.info,
      total: 0,
      movies:{},
      // 表示当前页面展示收藏电影还是已看过的电影，0默认看过
      collectedOrHistory: this.$route.query.status
    }
  },
  created() {
    this.searchPersonHistory(this.page,this.pageSize)
  },
  methods:{
    searchPersonHistory(page,pageSize){
      if(this.collectedOrHistory==0){
        this.request.get('/user/getUserRatingHistory',{
          params:{
            page: page,
            pageSize: pageSize,
            userId: localStorage.getItem("userId"),
          }
        }).then(res=>{
          if(res.code == 0){
            this.movies = res.data.movieList
            this.total = res.data.movieNum
            this.$message.success(res.message)
          }else{
            this.$message.error(res.message)
          }
        })
      }else{
        this.request.get('/user/getAllCollectedMovies',{
          params:{
            page: page,
            pageSize: pageSize,
            userId: localStorage.getItem("userId"),
          }
        }).then(res=>{
          if(res.code == 0){
            this.movies = res.data.movieList
            this.total = res.data.movieNum
            this.$message.success(res.message)
          }else{
            this.$message.error(res.message)
          }
        })
      }
    },
    handleSizeChange(pageSize){
      this.pageSize = pageSize
      this.searchPersonHistory(this.page,pageSize)

    },
    handleCurrentChange(pageNum){
      this.pageNum = pageNum
      this.searchPersonHistory(pageNum,this.pageSize)
    },
  },
  //监听地址的变化
  watch:{
    $route(){
      if(this.$route.query){
        this.collectedOrHistory = this.$route.query.status
        this.searchPersonHistory(this.page,this.pageSize)
      }
    }
  }
}
</script>

<style scoped>

</style>